<script>
$(document).ready(function() {
	$('#colTwo').pager('.pair');
	$(".fancy").fancybox({
	'titleShow'		: false,
	'transitionIn'	: 'elastic',
	'transitionOut'	: 'elastic'
	});		
});
</script>


<div id="mainContent">
<h2><?=$this->contentTitle ?></h2>
   <img src="/upload/category_product/<?=$this->image ?>" alt=""  class="imageCategory" /> 
   <span class="spanCategory"><?=$this->content ?></span>
   </div>
 <?$i = 0;?>  
 <?foreach( $this->products as $d ):?>   
 	<?if ( $i % 2 == 0  ):?>
 	<div class="pair">
    	<div class="box">
     	 <h4><?=$d['title'] ?></h4>
      		<div class="highDescription">
      		<p class="bottom"><a class="fancy" href="/upload/producto/<?=$d['image']?>"><img src="/upload/producto/<?=$d['image']?>"></a> <span><?=$d['description']?></span></p>
      		</div>
    	</div>
    <?else:?>
	 	<div class="box">
     	 <h4><?=$d['title'] ?></h4>
      		<div class="highDescription">
      		<p class="bottom"><a class="fancy" href="/upload/producto/<?=$d['image']?>"><img src="/upload/producto/<?=$d['image']?>"></a> <span><?=$d['description']?></span></p>
      		</div>
    	</div>
    <?endif;?>
    <?$i++?>
    <?if ($i % 2 == 0 ):?>
    </div>
    <?endif;?>
<?endforeach;?>    
